<template>
  <div class="index">
    <div class="theme"></div>
    <div class="title"></div>
    <div class="subtitle"></div>
    <div class="illustration"></div>
    <div class="goClassification" @click.stop.prevent="goClassification">立即体验</div>
    <!-- <div class="deerAnimee"></div> -->
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 引入wxjs
import wx from "weixin-js-sdk";
import { getData, getTxt, saveData } from "../api/index";
export default {
  name: "index",
  data() {
    return {};
  },
  created() {
    // this.getShareInfo();
    // this.getTxt();

  },
  mounted() {},

  methods: {
    async getTxt() {
      const res = await getTxt();
      console.log(res, "getTxt");
    },

    async goClassification() {
      const data = {
        key: "HEALTH_CARE_KEY",
      };
      // const res = await saveData(data);
      this.$router.push({
        path: "/classification",
      });
    },
    getShareInfo() {
      //获取url链接（如果有#需要这么获取）
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      //获取url链接（如果没有#需要这么获取）
      // var url = encodeURIComponent(window.location.href);
      if (typeof url === "string") {
        console.log("str 是字符串类型");
      } else {
        console.log("str 不是字符串类型");
      }
      getData(url).then((res) => {
        console.log(res);
        wx.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"], // 必填，需要使用的 JS 接口列表
        });
        wx.ready(() => {
          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.onMenuShareAppMessage({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
            fail: function (reject) {
              alert(JSON.stringify(reject), "失败");
            },
          });
          //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareTimeline({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
          });
        });
        //错误了会走 这里
        wx.error(function (res) {
          console.log("微信分享错误信息", res);
          // alert('ready 失败:', res);
        });
      });
    },
    openShare() {
      this.getShareInfo();
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/indexImg/indexImg_bg.png) no-repeat center;
  background-size: 100% 100%;
}
@media screen and (min-width: 440px) {
  .theme {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%);
    width: 275px;
    height: 20px;
    background: url(@/assets/indexImg/indexImg_theme.png) no-repeat center;
    background-size: 100% 100%;
  }
  .title {
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translate(-50%);
    width: 346px;
    height: 65px;
    background: url(@/assets/indexImg/indexImg_title.png) no-repeat center;
    background-size: 100% 100%;
  }
  .subtitle {
    position: absolute;
    top: 185px;
    left: 50%;
    transform: translate(-50%);
    width: 137px;
    height: 21px;
    background: url(@/assets/indexImg/indexImg_subtitle.png) no-repeat center;
    background-size: 100% 100%;
  }
  .illustration {
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translate(-50%);
    width: 347px;
    height: 311px;
    background: url(@/assets/indexImg/indexImg_illustration.png) no-repeat
      center;
    background-size: 100% 100%;
  }
  .goClassification {
    cursor: pointer;
    width: 200px;
    height: 63px;
    position: absolute;
    top: 527px;
    left: 50%;
    transform: translate(-50%);
    background: url(@/assets/indexImg/indexImg_button.png) no-repeat center;
    background-size: 100% 100%;

    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 23px;
    color: #a00000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 440px) {
  .theme {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translate(-50%);
    width: 550px;
    height: 40px;
    background: url(@/assets/indexImg/indexImg_theme.png) no-repeat center;
    background-size: 100% 100%;
  }
  .title {
    position: absolute;
    top: 205px;
    left: 50%;
    transform: translate(-50%);
    width: 693px;
    height: 130px;
    background: url(@/assets/indexImg/indexImg_title.png) no-repeat center;
    background-size: 100% 100%;
  }
  .subtitle {
    position: absolute;
    top: 370px;
    left: 50%;
    transform: translate(-50%);
    width: 275px;
    height: 42px;
    background: url(@/assets/indexImg/indexImg_subtitle.png) no-repeat center;
    background-size: 100% 100%;
  }
  .illustration {
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translate(-50%);
    width: 695px;
    height: 622px;
    background: url(@/assets/indexImg/indexImg_illustration.png) no-repeat
      center;
    background-size: 100% 100%;
  }
  .goClassification {
    cursor: pointer;
    width: 400px;
    height: 126px;
    position: absolute;
    top: 1055px;
    left: 50%;
    transform: translate(-50%);
    background: url(@/assets/indexImg/indexImg_button.png) no-repeat center;
    background-size: 100% 100%;

    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 46px;
    color: #a00000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// @keyframes deerAnimation {
//   0% { background-position: 0 0; }

//   100% { background-position: -14756px 0; }
// }

// .deerAnimee {
//   width: 200px;
//   height: 130px;
//   background: url("@/assets/deer.png") no-repeat;
//   background-size: 14756px 130px;
//   animation: deerAnimation 4.4s steps(64) infinite ;
//   animation-delay:1s;
// }

.p {
  font-family: "douyu";
}
</style>
